

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 角色管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">权限标题</label>
            <div class="layui-input-block">
              <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input" id="title">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="role-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <button class="layui-btn layuiadmin-btn-admin" data-type="showTree">树结构</button>
          <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
        </div>
        
<!--        <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>-->
        <table id="role-manage" lay-filter="role-manage"></table>

        <script type="text/html" id="table-useradmin-admin">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
      </div>


    </div>
  </div>
  <script src="/layuiadmin/layui/layui.js"></script>
  <script src="/comm.js"></script>
  <script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'useradmin', 'table','tree'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table
    ,tree = layui.tree
    //方法级渲染
    table.render({
      elem: '#role-manage'
      ,url: '/permission/findData.do'
      ,cols: [
        [
          {checkbox: true, fixed: true}
          ,{field:'title', title: '权限标题',sort: true}
          ,{field:'type', title: '权限类型',sort: true}
          ,{field:'href', title: '请求地址',sort: true}
          ,{field:'icon', title: '图标',sort: true}
          ,{field:'updateTime', title: '修改时间',sort: true}
          ,{field:'createTime', title: '创建时间',sort: true}
          ,{field:'ops', title:'操作',templet: '#table-useradmin-admin',width: 146}
        ]
      ]
      ,id: 'testReload'
      ,page: true
      ,height:'full-110'
    });

    //监听搜索
    form.on('submit(role-search)', function(data){
      var field = data.field;
      //执行重载(这里reload后面的ID是render后面的ID)
      table.reload('testReload', {
        where: {
          title: $("#title").val()
        },
        page: {
          curr: 1 //重新从第 1 页开始
      }
      });
    });
    // 监听form表单下拉框事件
    form.on('select(demo)', function(data){
      if(data.value=="菜单"){
        $.ajax({
          url: '/permission/getAllParentPermission.do',
          type: 'POST',
          success: function (result) {
            if (result.ret){
              $("#addParentpermission").initSelect(result.data,'id','title',null,'addParentpermission');
              $("#parentPermission")[0].style.display = 'block';
              <!-- 这是修改div里面的 -->
              $("#updateParentpermission").initSelect(result.data,'id','title',null,'updateParentpermission');
              $("#updateParentPermissionDiv")[0].style.display = 'block';
            }else{
              layer.msg(result.msg,{icon: 5,time: 2000});
            }
          },
          error: function (errorMsg) {
            layer.msg("数据异常!" + errorMsg, {icon: 5,time: 2000});
          },
        });
      }else{
        $("#parentPermission")[0].style.display = 'none';
        $("#updateParentPermissionDiv")[0].style.display = 'none';
      }
      form.render('select');
    });
    //事件
    var active = {
      showTree: function(){
        layer.open({
          //跳转页面是个隐藏div的时候用type=1，若是个地址的时候type=2
          type: 1
          ,title: '树结构'
          ,content: $("#showTree")
          ,area : ['100%', '100%']
          ,success: function(){
            // 通过ajax获取后台所有的权限数据，然后在渲染到页面上
            $.ajax({
              url: '/role/getPermissionTree.do',
              type: 'GET',
              success: function (result) {
                if (result.ret == true) {
                  // 请求成功渲染权限树
                  tree.render({
                    elem: '#showTree'
                    ,data: result.data
                    ,showCheckbox: true  //是否显示复选框
                    ,id: 'meun-tree-demo'
                    ,isJump: false //是否允许点击节点时弹出新窗口跳转
                  });
                } else {
                  layer.msg(result.msg, {icon: 5});
                  layer.close(index);
                }
              },
              error: function (errorMsg) {
                layer.msg("数据异常!" + errorMsg, {icon: 5});
                layer.close(index);
                location.reload();
              },
            });
          }
        });
      }
      ,add: function(){
        layer.open({
          //跳转页面是个隐藏div的时候用type=1，若是个地址的时候type=2
          type: 1
          ,title: '添加权限'
          ,content: $("#addPermission")
          ,area : 'auto'
          ,cancel : function() {
            // 你点击右上角 X 取消后要做什么
            $("#addPermission")[0].reset();
            layui.form.render();
          }
        });
        // 监听提交按钮
        form.on('submit(addBtn)',function (data) {
          var field = data.field;
          // 向数据库添加数据
          $.ajax({
            url: '/permission/add.do',
            type: 'POST',
            data: JSON.stringify(field),
            contentType: "application/json;charset=UTF-8",
            success: function (result) {
              if (result.ret){
                //执行重载
                layer.msg('添加成功', {
                  offset: 'auto'
                  , icon: 1
                }, function () {
                  location.reload();
                });
              }else{
                layer.msg(result.msg,{icon: 5});
              }
            },
            error: function (errorMsg) {
              layer.msg("数据异常!" + errorMsg, {icon: 5});
            },
          });
          layer.closeAll(); //关闭弹层
          return false;
        })
      }
    }
    // 监听行工具事件使用该事件的时候要将按钮那里添加lay-event="edit",lay-event="del"
    table.on('tool(role-manage)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('真的删除吗！', function (index) {
          //异步像服务器发送删除请求
          $.ajax({
            url: '/permission/del.do',
            type: 'POST',
            data: {'id': data.id},
            success: function (result) {
              if (result.ret == true) {
                layer.msg("删除成功!", {icon: 6});
                obj.del();
                layer.close(index);
              } else {
                layer.msg(result.msg, {icon: 5});
                layer.close(index);
              }
            },
            error: function (errorMsg) {
              layer.msg("数据异常!" + errorMsg, {icon: 5});
              layer.close(index);
              location.reload();
            },
          });
        });
        //更新用户
      } else if (obj.event == 'edit') {
        layer.open({
          type: 1,
          title: "更新权限",
          area: 'auto',
          content: $("#updatePermission"),
          success: function () {
            alert(JSON.stringify(data));
            // 通过ajax请求传递该角色ID然后查询出该角色下的权限
            $("#updatePermission").find($("input[name='title']")).val(data.title);
            $("#updatePermission").find($("input[name='href']")).val(data.href);
            $("#updatePermission").find($("select[name='type']")).val(data.type);
            $("#updatePermission").find($("input[name='icon']")).val(data.icon);
            layui.form.render();
          },
          cancel : function() {
          // 你点击右上角 X 取消后要做什么
          $("#updatePermission")[0].reset();
          layui.form.render();
        }
        });
        updateData(data);
      }
    });

    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    function updateData(obj){
      form.on('submit(updateBtn)',function(data){
        var permission = {
          id:obj.id,
          title:data.field.title,
          href:data.field.href,
          type:data.field.type,
          parentId: data.field.parentId,
          icon: data.field.icon
        }
        $.ajax({
          url: '/permission/update.do',
          type: 'POST',
          data: JSON.stringify(permission),
          contentType: "application/json;charset=UTF-8",
          success: function (result) {
            if (result.ret){
              //执行重载
              layer.msg('修改成功',{
                icon: 6,
                time: 1000,
                end: function () {
                  location.reload();
                  layer.closeAll();//关闭所有的弹出层
                }
              })
            }else{
              layer.msg(result.msg,{icon: 5});
            }
          },
          error: function (errorMsg) {
            layer.msg("数据异常!" + errorMsg, {icon: 5});
            layer.closeAll();//关闭所有的弹出层
            location.reload();
          },
        });
        return false;
      });
    }
  });
  </script>
</body>
<!--新增隐藏模块-->
<form class="layui-form" lay-filter="layuiadmin-form-admin" id="addPermission" style="padding: 20px 30px 0 0;display: none">
  <div class="layui-form-item">
    <label class="layui-form-label">权限标题</label>
    <div class="layui-input-inline">
      <input type="text" name="title" lay-verify="required" placeholder="如：权限管理" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">权限类型</label>
    <div class="layui-input-inline">
      <select name="type" lay-filter="demo">
        <option value="目录">目录</option>
        <option value="菜单">菜单</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item" style="display: none" id="parentPermission">
    <label class="layui-form-label">父权限标题</label>
    <div class="layui-input-inline">
      <!-- 加parentId方便我们直接通过data.field转对象 -->
      <select id="addParentpermission" name="parentId">

      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">请求地址</label>
    <div class="layui-input-inline">
      <input type="text" name="href" placeholder="如：/user/findData.do" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图标</label>
    <div class="layui-input-inline">
      <input type="text" name="icon" placeholder="如：layui-icon-home" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="addBtn">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<!-- 修改 start -->
<form class="layui-form" lay-filter="layuiadmin-form-admin" id="updatePermission" style="padding: 20px 30px 0 0;display: none">
  <div class="layui-form-item">
    <label class="layui-form-label">权限标题</label>
    <div class="layui-input-inline">
      <input type="text" name="title" lay-verify="required" placeholder="如：权限管理" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">权限类型</label>
    <div class="layui-input-inline">
      <select name="type" lay-filter="demo">
        <option value="目录">目录</option>
        <option value="菜单">菜单</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item" style="display: none" id="updateParentPermissionDiv">
    <label class="layui-form-label">父权限标题</label>
    <div class="layui-input-inline">
      <!-- 加parentId方便我们直接通过data.field转对象 -->
      <select id="updateParentpermission" name="parentId">

      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">请求地址</label>
    <div class="layui-input-inline">
      <input type="text" name="href" placeholder="如：/user/findData.do" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图标</label>
    <div class="layui-input-inline">
      <input type="text" name="icon" placeholder="如：layui-icon-home" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="updateBtn">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<!-- 修改end -->
<div id = "showTree" style="padding: 20px 30px 0 0;display: none"></div>
</html>

